<!-- 库房选择弹窗 -->
<template>
  <el-dialog v-model="dialogVisible" title="发票单选择" width="1000px" draggable align-center>
    <div class="main-box">
      <div class="table-box">
        <SelectFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
        <ProTable
          ref="proTable"
          title="发票单列表"
          highlight-current-row
          :columns="columns"
          :request-api="getTaskOrderList"
          :init-param="Object.assign(initParam, selectFilterValues)"
          height="400px"
        >
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Select" @click="handleSubmit(scope.row)">选择</el-button>
          </template>
        </ProTable>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Select } from "@element-plus/icons-vue";
import { Money } from "@/api/interface";
import { editBill } from "@/api/modules/money";
import { getTaskOrderList } from "@/api/modules/substation";
import { FormInstance, ElMessage } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
//import SelectFilter from "@/components/SelectFilter/index.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "taskId", label: "任务单id", width: 100, sortable: true, search: { el: "input" } },
  { prop: "substationId", label: "所属分站", width: 120, search: { el: "input" } },
  //{ prop: "warehouseLevel", label: "库房等级", search: { el: "input" }, enum: warehouseLevel, tag: true, sortable: true },
  { prop: "orderInfo.orderId", label: "订单id" },
  { prop: "orderInfo.totalAmount", label: "订单金额" },
  { prop: "customInfo.customerId", label: "客户id" },
  { prop: "customInfo.customerName", label: "客户姓名" },
  { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

const selectFilterData = reactive([
  {
    title: "任务类型(单)",
    key: "taskType",
    options: [
      {
        label: "全部",
        value: -1
      },
      {
        label: "送货收款",
        value: 1,
        icon: "Box"
      },
      {
        label: "退货",
        value: 2,
        icon: "SoldOut"
      },
      {
        label: "换货",
        value: 3,
        icon: "Sell"
      }
    ]
  }
]);

onMounted(() => {});

const dialogVisible = ref(false);

const billInfo = ref();
const userStore = useUserStore();
const initParam = reactive({ substationId: userStore.userInfo.departmentId });

// 默认 selectFilter 参数
const selectFilterValues = ref({ taskType: -1, taskStatus: [0, 1] });
const changeSelectFilter = (value: typeof selectFilterValues.value) => {
  ElMessage.success("筛选成功 😘");
  proTable.value!.pageable.current = 1;
  selectFilterValues.value = value;
};

// 接收父组件传过来的参数
const open = (row: Money.ResBillList) => {
  billInfo.value = row;
  dialogVisible.value = true;
  console.log(111111111111111);
};

// const handleSubmit = () => {};
// const emit = defineEmits(["get-warehouse"]);
// const selectWarehouse = async (row: Warehouse.WarehouseInfo) => {
//   emit("get-warehouse", row);
//   dialogVisible.value = false;
// };

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = async (row: Money.ResBillList) => {
  const ruleFormRefValue = ruleFormRef.value;
  if (!ruleFormRefValue) return;

  const isValid = await ruleFormRefValue.validate();
  if (!isValid) return;

  try {
    billInfo.value.substationId = row.taskOrderInfo?.substationId;
    billInfo.value.orderInfo.orderId = row.taskOrderInfo?.orderInfo.orderId;
    billInfo.value.orderInfo.totalAmount = row.taskOrderInfo?.orderInfo.totalAmount;
    billInfo.value.customInfo.customerId = row.taskOrderInfo?.customInfo.customerId;
    billInfo.value.customInfo.customerName = row.taskOrderInfo?.customInfo.customerName;

    await editBill!(billInfo.value);

    ElMessage.success({ message: `调拨成功！` });

    const getTableList = billInfo.value.getTableList;
    if (getTableList) {
      getTableList();
    }

    dialogVisible.value = false;
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  open
});
</script>
